<template>
  <view class="comments-container">
    <!-- 顶部导航栏 -->
    <u-navbar
      title="商品评论"
      :border-bottom="false"
      bg-color="#ffffff"
      title-color="#000000"
      :left-icon="'arrow-left'"
      @left-click="goBack"
      :fixed="true"
      :auto-back="true"
    ></u-navbar>

    <!-- 评论列表 -->
    <view class="comments-list">
      <view 
        v-for="(comment, index) in comments" 
        :key="comment.id"
        class="comment-item"
      >
        <!-- 评论头部 -->
        <view class="comment-header">
          <view class="comment-user">
            <image class="comment-avatar" :src="comment.avatar" mode="aspectFill"></image>
            <view class="comment-user-info">
              <text class="comment-username">{{ comment.username }}</text>
              <view class="comment-rating">
                <u-icon 
                  v-for="i in 5" 
                  :key="i"
                  :name="i <= comment.rating ? 'star-fill' : 'star'" 
                  size="12" 
                  :color="i <= comment.rating ? '#ff6b35' : '#ddd'"
                ></u-icon>
              </view>
            </view>
          </view>
          <text class="comment-time">{{ comment.time }}</text>
        </view>
        
        <!-- 评论内容 -->
        <view class="comment-content">
          <text class="comment-text">{{ comment.content }}</text>
          
          <!-- 评论图片 -->
          <view v-if="comment.images && comment.images.length > 0" class="comment-images">
            <image 
              v-for="(image, imgIndex) in comment.images" 
              :key="imgIndex"
              class="comment-image" 
              :src="image" 
              mode="aspectFill"
              @click="previewImage(comment.images, imgIndex)"
            ></image>
          </view>
        </view>
        
        <!-- 商家回复 -->
        <view v-if="comment.reply" class="merchant-reply">
          <view class="reply-header">
            <u-icon name="service" size="14" color="#1abc9c"></u-icon>
            <text class="reply-label">商家回复</text>
          </view>
          <text class="reply-content">{{ comment.reply }}</text>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <u-loadmore 
      :status="loadMoreStatus" 
      @loadmore="loadMore"
    ></u-loadmore>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productId: '',
      comments: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      loadMoreStatus: 'loadmore'
    }
  },
  
  onLoad(options) {
    this.productId = options.id || '1'
    this.loadComments()
  },
  
  onReachBottom() {
    this.loadMore()
  },
  
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    loadComments() {
      // 模拟加载评论数据
      const mockComments = {
        '1': [
          {
            id: 1,
            username: '用户001',
            avatar: '/static/c1.png',
            rating: 5,
            content: '质量很好，穿着很舒服，版型也很正，推荐购买！面料手感不错，做工精细，没有线头。',
            time: '2024-01-15 14:30',
            images: ['/static/c1.png', '/static/c2.png'],
            reply: '感谢您的好评，我们会继续努力提供更好的产品和服务！'
          },
          {
            id: 2,
            username: '用户002',
            avatar: '/static/c2.png',
            rating: 4,
            content: '颜色很正，面料也不错，就是稍微有点小，建议买大一号。整体还是很满意的。',
            time: '2024-01-14 16:20',
            images: ['/static/c3.png']
          },
          {
            id: 3,
            username: '用户003',
            avatar: '/static/c3.png',
            rating: 5,
            content: '非常喜欢这件衣服，款式时尚，穿着舒适，朋友们都说好看！',
            time: '2024-01-13 09:15',
            images: []
          },
          {
            id: 4,
            username: '用户004',
            avatar: '/static/c1.png',
            rating: 4,
            content: '物流很快，包装完好，衣服质量不错，值得推荐。',
            time: '2024-01-12 11:45',
            images: ['/static/c2.png', '/static/c3.png'],
            reply: '谢谢您的支持，我们会继续保持优质的服务！'
          },
          {
            id: 5,
            username: '用户005',
            avatar: '/static/c2.png',
            rating: 5,
            content: '第二次购买了，一如既往的好，这次给朋友也推荐了。',
            time: '2024-01-11 20:30',
            images: []
          }
        ],
        '2': [
          {
            id: 1,
            username: '用户101',
            avatar: '/static/c1.png',
            rating: 4,
            content: '格纹很经典，一字肩设计很时尚，适合各种场合。',
            time: '2024-01-15 10:20',
            images: ['/static/c1.png']
          },
          {
            id: 2,
            username: '用户102',
            avatar: '/static/c2.png',
            rating: 5,
            content: '面料舒适，版型修身，职场必备单品。',
            time: '2024-01-14 15:10',
            images: []
          }
        ],
        '3': [
          {
            id: 1,
            username: '用户201',
            avatar: '/static/c3.png',
            rating: 5,
            content: '耳环很精致，戴上很有气质，朋友们都说好看！',
            time: '2024-01-15 18:30',
            images: ['/static/c3.png', '/static/c1.png']
          }
        ]
      }
      
      const productComments = mockComments[this.productId] || mockComments['1']
      
      // 模拟分页
      const startIndex = (this.page - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      const pageComments = productComments.slice(startIndex, endIndex)
      
      if (this.page === 1) {
        this.comments = pageComments
      } else {
        this.comments = [...this.comments, ...pageComments]
      }
      
      this.hasMore = endIndex < productComments.length
      this.loadMoreStatus = this.hasMore ? 'loadmore' : 'nomore'
    },
    
    loadMore() {
      if (!this.hasMore || this.loadMoreStatus === 'loading') return
      
      this.loadMoreStatus = 'loading'
      this.page++
      
      setTimeout(() => {
        this.loadComments()
      }, 500)
    },
    
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.comments-container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-top: 44px;
}

.comments-list {
  padding: 10px;
}

.comment-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.comment-user {
  display: flex;
  align-items: center;
  flex: 1;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-user-info {
  flex: 1;
}

.comment-username {
  font-size: 14px;
  color: #333333;
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}

.comment-rating {
  display: flex;
  gap: 2px;
}

.comment-time {
  font-size: 12px;
  color: #999999;
}

.comment-content {
  margin-bottom: 12px;
}

.comment-text {
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
  display: block;
  margin-bottom: 10px;
}

.comment-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.comment-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.merchant-reply {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 12px;
  border-left: 3px solid #1abc9c;
}

.reply-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.reply-label {
  font-size: 12px;
  color: #1abc9c;
  font-weight: bold;
  margin-left: 4px;
}

.reply-content {
  font-size: 13px;
  color: #666666;
  line-height: 1.4;
}
</style> 